<template>
  <view class="feature-area">
    <view class="feature-item" v-for="(item, idx) in features" :key="idx">
      <view class="feature-icon">
        <image :src="item.icon" mode="aspectFit" />
      </view>
      <text>{{ item.name }}</text>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

const features = ref([
  { name: '新品推荐', icon: '/static/svg/new-product.svg' },
  { name: '热销排行', icon: '/static/svg/hot-sales.svg' },
  { name: '本周特惠', icon: '/static/svg/weekly-special.svg' },
  { name: '会买专辑', icon: '/static/svg/member-album.svg' }
]);
</script>

<style scoped>
.feature-area {
  display: flex;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  background-color: #ffffff;
  padding-top: 20rpx;
  padding-bottom: 20rpx;
}
.feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.feature-icon {
  width: 80rpx;
  height: 80rpx;
  margin-bottom: 10rpx;
  overflow: hidden;
}
.feature-icon image {
  width: 100%;
  height: 100%;
}
</style> 